<template>
  <div class="campus-card-container">
    <h2>校园卡服务</h2>
    
    <el-row :gutter="20" class="card-info">
      <el-col :span="8">
        <el-card class="balance-card">
          <div class="card-header">
            <span>校园卡余额</span>
            <el-button type="primary" @click="showRechargeDialog">在线充值</el-button>
          </div>
          <div class="balance-amount">
            ¥{{ balance }}
          </div>
          <div class="last-update">
            最后更新: {{ lastUpdate }}
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>消费统计</span>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchConsumptionData">
              </el-date-picker>
            </div>
          </template>
          
          <div class="chart-container">
            <div ref="chart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="transaction-card">
      <template #header>
        <div class="card-header">
          <span>消费记录</span>
          <el-button @click="exportRecords">导出记录</el-button>
        </div>
      </template>
      
      <el-table :data="transactions" style="width: 100%" v-loading="loading">
        <el-table-column prop="date" label="消费时间" width="180"></el-table-column>
        <el-table-column prop="location" label="消费地点"></el-table-column>
        <el-table-column prop="type" label="消费类型" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.type === '餐饮' ? 'primary' : 'success'">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="消费金额" width="120">
          <template #default="scope">
            <span style="color: #f56c6c">-{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="余额" width="120"></el-table-column>
      </el-table>
      
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePageChange"
        class="pagination">
      </el-pagination>
    </el-card>
    
    <!-- 充值对话框 -->
    <el-dialog v-model="rechargeDialogVisible" title="在线充值" width="400px">
      <el-form :model="rechargeForm" label-width="80px">
        <el-form-item label="充值金额">
          <el-input-number 
            v-model="rechargeForm.amount" 
            :min="1" 
            :max="1000" 
            :step="10"
            controls-position="right">
          </el-input-number>
          <span class="unit">元</span>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-radio-group v-model="rechargeForm.paymentMethod">
            <el-radio label="wechat">微信支付</el-radio>
            <el-radio label="alipay">支付宝</el-radio>
            <el-radio label="bank">银行卡</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rechargeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmRecharge" :loading="rechargeLoading">充值</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'CampusCard',
  data() {
    return {
      balance: 125.50,
      lastUpdate: '2024-10-21 14:30:25',
      dateRange: [],
      chart: null,
      loading: false,
      rechargeDialogVisible: false,
      rechargeLoading: false,
      rechargeForm: {
        amount: 100,
        paymentMethod: 'wechat'
      },
      transactions: [
        { date: '2024-10-21 12:30:15', location: '一食堂一楼', type: '餐饮', amount: '12.50', balance: '125.50' },
        { date: '2024-10-21 18:45:22', location: '二食堂二楼', type: '餐饮', amount: '18.00', balance: '138.00' },
        { date: '2024-10-20 12:15:30', location: '超市', type: '购物', amount: '25.80', balance: '156.00' },
        { date: '2024-10-20 19:20:10', location: '一食堂二楼', type: '餐饮', amount: '10.00', balance: '166.00' },
        { date: '2024-10-19 12:40:05', location: '二食堂一楼', type: '餐饮', amount: '15.20', balance: '176.00' },
        { date: '2024-10-19 19:05:45', location: '超市', type: '购物', amount: '32.60', balance: '191.20' }
      ],
      total: 100,
      pageSize: 10,
      currentPage: 1
    }
  },
  mounted() {
    this.initChart()
    this.fetchConsumptionData()
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        this.chart = echarts.init(this.$refs.chart)
        this.updateChart()
      })
    },
    updateChart() {
      if (!this.chart) return
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value',
          name: '消费金额 (元)'
        },
        series: [{
          data: [45, 52, 38, 60, 75, 88, 65],
          type: 'line',
          smooth: true,
          itemStyle: { color: '#409eff' },
          areaStyle: { color: 'rgba(64, 158, 255, 0.1)' }
        }]
      }
      
      this.chart.setOption(option)
    },
    fetchConsumptionData() {
      this.loading = true
      // 模拟数据加载
      setTimeout(() => {
        this.loading = false
        this.updateChart()
      }, 500)
    },
    showRechargeDialog() {
      this.rechargeForm.amount = 100
      this.rechargeForm.paymentMethod = 'wechat'
      this.rechargeDialogVisible = true
    },
    async confirmRecharge() {
      if (this.rechargeForm.amount <= 0) {
        this.$message.warning('充值金额必须大于0')
        return
      }
      
      try {
        this.rechargeLoading = true
        // 模拟充值过程
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 更新余额
        this.balance += this.rechargeForm.amount
        this.lastUpdate = new Date().toLocaleString()
        
        this.rechargeDialogVisible = false
        this.$message.success(`充值成功！当前余额: ¥${this.balance}`)
      } catch (error) {
        this.$message.error('充值失败，请稍后重试')
      } finally {
        this.rechargeLoading = false
      }
    },
    exportRecords() {
      this.$message.info('导出记录功能开发中...')
    },
    handlePageChange(page) {
      this.currentPage = page
      this.loading = true
      // 模拟分页加载
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style scoped>
.campus-card-container {
  padding: 20px;
}

.card-info {
  margin-bottom: 20px;
}

.balance-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.balance-amount {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin: 20px 0;
  text-align: center;
}

.last-update {
  text-align: center;
  color: #909399;
  font-size: 14px;
}

.chart-container {
  height: 300px;
}

.transaction-card {
  margin-top: 20px;
}

.unit {
  margin-left: 10px;
  color: #909399;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>